<template>
	<view>
		<view class="ipt-wrap">

			<view class="item-wrap">
				<view class="left">
					<text style="color:red">*</text>所属测站
				</view>
				<view class="right">
					<picker @change="PickerChange($event,'nameindex')" :value="nameindex" :range="arraysname">
						<view class="uni-input">{{arraysname[nameindex]}}</view>
					</picker>

				</view>
			</view>
			
			<view class="item-wrap">
				<view class="left">
						<text style="color:red">*</text>开始时间
				</view>
				<view class="right">
					<picker mode="date" :value="beginDate"   @change="TimeChange($event,'beginDate')">
						<view class="uni-input">{{beginDate?beginDate:'点击选择'}}</view>
					</picker>
								
			
				</view>
			</view>
			
			
			<view class="item-wrap">
				<view class="left">
					<text style="color:red">*</text>结束时间
				</view>
				<view class="right">
					<picker mode="date" :value="endDate"   @change="TimeChange($event,'endDate')">
						<view class="uni-input">{{endDate?endDate:'点击选择'}}</view>
					</picker>
								
			
				</view>
			</view>
			<view class="item-wrap">
				<view class="left">
					出差天数
				</view>
				<view class="right">
					<view class="uni-input">{{tripDays}}</view>
				</view>
			</view>
			<view class="item-wrap">
				<view class="left">
					<text style="color:red">*</text>地点
				</view>
				<view class="right">
					<input class="uni-input"  v-model="location"  placeholder="请输入地点" />
				</view>
			</view>
			<view class="item-wrap">
				<view class="left">
						<text style="color:red">*</text>出差事由
				</view>
				<view class="right">
					<input class="uni-input"  v-model="reason"  placeholder="请输入出差事由" />
				</view>
			</view>
			
			<view class="item-wrap">
				<view class="left">
						<text style="color:red">*</text>交通工具
				</view>
				<view class="right">
					<input class="uni-input"  v-model="vehicle"  placeholder="请输入交通工具" />
				</view>
			</view>
			
			
			<view class="item-wrap">
				<view class="left">
					备注
				</view>
				<view class="right">
					<input class="uni-input"  v-model="remark"  placeholder="请输入备注" />
				</view>
			</view>
			
			<view class="item-wrap">
				<view class="left">
					附件
				</view>
				<view class="right">
					<button @tap="chooseImg" class="mini-btn" type="primary" size="mini">{{files?'重新上传':'点击上传'}}</button>
			
					
				</view>
			</view>
			
			<image v-if="files" style="width: 634rpx; height: 358rpx;"  :src="showpic+files" />
			
			
		</view>
		
		
		<view class="sub-btn">
			<image @tap="subdata(false)" style="width: 268rpx; height: 112rpx;"  src="/static/imgnew/bcbg.png" />
			<image @tap="subdata(true)" style="width: 268rpx; height: 112rpx;"  src="/static/imgnew/tjbg.png" />
		</view>
	</view>
</template>


<script>
	
	export default{
		data(){
			return {
				showpic:this.$showpic,
				arraysname:[],
				nameindex:0,
				files:'',
				clockTypeindex:0,
			
				remark:'',
				beginDate:'',
				endDate:'',
				location:'',
				reason:'',
				user:{},
				tripDays:'',
				stcdList:[],
				pagedata:{},
				vehicle:''
				
			}
		},
		onLoad(options){
			
			
			
			
			this.user=JSON.parse(uni.getStorageSync("userinfo"))
			
			
			
			this.stcdList=this.user.stcdList
			
			
			if(options.pagedata){
				this.pagedata=JSON.parse(options.pagedata)
				
				this.beginDate=this.pagedata.beginDate
				this.files=this.pagedata.files
				this.endDate=this.pagedata.endDate
				this.location=this.pagedata.location
				this.remark=this.pagedata.remark
				this.reason=this.pagedata.reason
				
				this.stcd=this.pagedata.stcd
				this.stnm=this.pagedata.stnm
				this.tripDays=this.pagedata.tripDays
				this.vehicle=this.pagedata.vehicle
				
				
			}
			
			this.arraysname=this.stcdList.map(item=>{
				return item.stnm
			})
		},
		onNavigationBarButtonTap(e) {
			this.subdata()
		},
		methods: {
			chooseImg(){
				
				let that=this
				
				uni.chooseImage({
					count:1,
					sizeType:'compressed',
					success: (res) => {
						const imgsFile=res.tempFilePaths
						uni.showLoading({
						    title: '正在上传'
						});
						const uper=uni.uploadFile({
							url: that.upUrl+'/soilWater/manage/file/create/filesUpload',
							filePath:imgsFile[0],
							name:'files',
							header:{  
								"Authorization": uni.getStorageSync("auth_token")
							},
							success:function(res){
								
								
								let data=JSON.parse(res.data)
								that.files=data.object
								
								if(data.code=='1'){
									that.files=data.object
									uni.showToast({
										title: "上传成功",
										icon: "none",
										duration:4000,
									});
									uni.hideLoading();
									
									
									
									
								}
							}
						})
						
					}
				})
			
			},
			TimeChange(val,type){
				
				this[type]=val.detail.value
				if(this.beginDate&&this.endDate){
					const time1 = new Date(this.beginDate).getTime(); // 获取date1的毫秒数
					const time2 = new Date(this.endDate).getTime(); // 获取date2的毫秒数
									 
					const diff = Math.abs(time1 - time2); // 两个时间间隔的毫秒数
					 this.tripDays=Math.floor(diff / (24 * 60 * 60 * 1000)); // 计算天数
				}
				
			},
			PickerChange(val,type){
				this[type]=val.detail.value
			},
			subdata(submitFlag){
				let that=this
				if(this.beginDate==''){
					uni.showToast({
					    title: '选择开始时间',
					    duration:4000,
						icon:'none'
					});
					return
				}
				
				if(this.endDate==''){
					uni.showToast({
					    title: '选择结束时间',
					    duration:4000,
						icon:'none'
					});
					return
				}
				if(this.location==''){
					uni.showToast({
					    title: '请输入出差地点',
					    duration:4000,
						icon:'none'
					});
					return
				}
				
				if(this.reason==''){
					uni.showToast({
					    title: '请输入出差事由',
					    duration:4000,
						icon:'none'
					});
					return
				}
				if(this.vehicle==''){
					uni.showToast({
					    title: '请输入交通工具',
					    duration:4000,
						icon:'none'
					});
					return
				}
				
				
				
				
				
				
				that.apipost('/soilWater/manage/trip/save/saveTripApply',{
					files:that.files,
					submitFlag,
					beginDate:that.beginDate,
					endDate:that.endDate,
					id:that.pagedata.id?that.pagedata.id:'',
					location:that.location,
					reason:that.reason,
					remark:that.remark,
					tripDays:that.tripDays,
					vehicle:that.vehicle,
					stnm:that.stcdList[that.nameindex].stnm,
					stcd:that.stcdList[that.nameindex].stcd,
					userCode:that.user.userNo
				},false).then(res => {
					
					
					if(res.code==1){
						uni.showToast({
							icon: 'none',
							duration:4000,
							title: '操作成功'
						});
						setTimeout(function(){
							uni.navigateBack({
								delta:1
							})
						},800)
					}
					
				}).catch(err=>{
					console.log(err)
				});
			}
			
			
		},

	}
</script>
<style>
	.sub-btn{
		display:flex;
		justify-content: center;
		align-items: center;
		padding:40rpx 0 0 0;
	}
	.tip-wrap{
		margin-top:30rpx;
		line-height:54rpx;
		padding-left:40rpx;
	}
	page{
		height:100%;
		background:#F5F9FF;
	}
	.ipt-wrap{
		margin-top:80rpx;
		padding:0 40rpx;
		background:#fff;
	}
	.item-wrap{
		border-bottom:1rpx solid rgba(63,140,255,0.2);;
		color:#00041A;
		height:95rpx;
		display:flex;
		align-items: center;
		justify-content: space-between;
	}
	textarea,input{
		text-align: right;
	}
</style>